<template>
  <div v-loading="loading" :element-loading-text="loadtext">
    <h1>{{title}}</h1>
    <div style="border: 1px solid #CCCCCC">
      <v-report-header></v-report-header>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="height:122px;line-height: 122px;">指标名称</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple" style="height:122px;line-height: 122px;">代码</div>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col>
              <div class="grid-content bg-purple">人次数</div>
            </el-col>
            <el-col>
              <div class="grid-content bg-purple">本季</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">组织</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">接待</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col>
              <div class="grid-content bg-purple">人天数</div>
            </el-col>
            <el-col>
              <div class="grid-content bg-purple">本季</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">组织</div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">接待</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">甲</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">乙</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">01</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">02</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">05</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">06</div>
        </el-col>
      </el-row>
      <el-row v-for="(item,index) in zzjdarr" :key="item.code">
        <el-col :span="6">
          <div class="grid-content bg-purple">{{item.title}}</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">{{item.code}}</div>
        </el-col>
        <div v-if="index === 0">
          <el-col :span="4">
            <div class="grid-content">
              <el-input :disabled="true" value="--------"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input :disabled="true" value="--------"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input :disabled="true" value="--------"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input :disabled="true" value="--------"></el-input>
            </div>
          </el-col>
        </div>
        <div v-else-if="index === 32 || index === 33 || index === 34">
          <el-col :span="4">
            <div class="grid-content">
              <el-input-number style="width:100%;" v-model="zzjdarr[index].data[0]" :min="0" :controls="false" @change="changeStoreArray"></el-input-number>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input :disabled="true" value="--------"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input :disabled="true" value="--------"></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input :disabled="true" value="--------"></el-input>
            </div>
          </el-col>
        </div>
        <div v-else>
          <el-col :span="4">
            <div class="grid-content">
              <el-input-number style="width:100%;" :disabled="index === 0?true:false" v-model="zzjdarr[index].data[0]" :min="0" :controls="false" @change="changeStoreArray"></el-input-number>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input-number style="width:100%;" :disabled="index === 0?true:false" v-model="zzjdarr[index].data[1]" :min="0" :controls="false" @change="changeStoreArray"></el-input-number>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input-number style="width:100%;" :disabled="index === 0?true:false" v-model="zzjdarr[index].data[2]" :min="0" :controls="false" @change="changeStoreArray"></el-input-number>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              <el-input-number style="width:100%;" :disabled="index === 0?true:false" v-model="zzjdarr[index].data[3]" :min="0" :controls="false" @change="changeStoreArray"></el-input-number>
            </div>
          </el-col>
        </div>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24">
        <p style="padding:10px;float:left;">备注说明</p>
      </el-col>
      <el-col :span="24">
        <el-input type="textarea" :rows="3" @input="$emit('getZzjdDataDes',$event)"></el-input>
      </el-col>
    </el-row>
    <v-buttons @getInputLength="queryInput" @countTourismPeoples="countTourism"></v-buttons>
  </div>
</template>
<script>
import { cleanInput } from '../util'
import { mapGetters, mapActions } from 'vuex'
import vReportHeader from './ReportHeader.vue'
import vButtons from './Buttons.vue'
import * as api from '../api'
export default {
  components: {
    vReportHeader, vButtons
  },
  props: [
    'title'
  ],
  computed: {
    ...mapGetters(['zzjds']),
  },
  mounted() {
    if (sessionStorage.getItem("zzjdarr")) {
      this.zzjdarr = JSON.parse(sessionStorage.getItem('zzjdarr'));
    }
  },
  data() {
    return {
      loading: false,
      loadtext: '',
      zzjdarr: [
        {
          title: '合计',
          code: '01',
          data: [0, 0, 0, 0]
        }, {
          title: '北京',
          code: '02',
          data: [0, 0, 0, 0]
        }, {
          title: '天津',
          code: '03',
          data: [0, 0, 0, 0]
        }, {
          title: '河北',
          code: '04',
          data: [0, 0, 0, 0]
        }, {
          title: '山西',
          code: '05',
          data: [0, 0, 0, 0]
        }, {
          title: '内蒙古',
          code: '06',
          data: [0, 0, 0, 0]
        }, {
          title: '辽宁',
          code: '07',
          data: [0, 0, 0, 0]
        }, {
          title: '吉林',
          code: '08',
          data: [0, 0, 0, 0]
        }, {
          title: '黑龙江',
          code: '09',
          data: [0, 0, 0, 0]
        }, {
          title: '上海',
          code: '10',
          data: [0, 0, 0, 0]
        }, {
          title: '江苏',
          code: '11',
          data: [0, 0, 0, 0]
        }, {
          title: '浙江',
          code: '12',
          data: [0, 0, 0, 0]
        }, {
          title: '安徽',
          code: '13',
          data: [0, 0, 0, 0]
        }, {
          title: '福建',
          code: '14',
          data: [0, 0, 0, 0]
        }, {
          title: '江西',
          code: '15',
          data: [0, 0, 0, 0]
        }, {
          title: '山东',
          code: '16',
          data: [0, 0, 0, 0]
        }, {
          title: '河南',
          code: '17',
          data: [0, 0, 0, 0]
        }, {
          title: '湖北',
          code: '18',
          data: [0, 0, 0, 0]
        }, {
          title: '湖南',
          code: '19',
          data: [0, 0, 0, 0]
        }, {
          title: '广东',
          code: '20',
          data: [0, 0, 0, 0]
        }, {
          title: '广西',
          code: '21',
          data: [0, 0, 0, 0]
        }, {
          title: '海南',
          code: '22',
          data: [0, 0, 0, 0]
        }, {
          title: '重庆',
          code: '23',
          data: [0, 0, 0, 0]
        }, {
          title: '四川',
          code: '24',
          data: [0, 0, 0, 0]
        }, {
          title: '贵州',
          code: '25',
          data: [0, 0, 0, 0]
        }, {
          title: '云南',
          code: '26',
          data: [0, 0, 0, 0]
        }, {
          title: '西藏',
          code: '27',
          data: [0, 0, 0, 0]
        }, {
          title: '陕西',
          code: '28',
          data: [0, 0, 0, 0]
        }, {
          title: '甘肃',
          code: '29',
          data: [0, 0, 0, 0]
        }, {
          title: '青海',
          code: '30',
          data: [0, 0, 0, 0]
        }, {
          title: '宁夏',
          code: '31',
          data: [0, 0, 0, 0]
        }, {
          title: '新疆',
          code: '32',
          data: [0, 0, 0, 0]
        }, {
          title: '一日游组织人次数',
          code: '33',
          data: [0]
        }, {
          title: '过夜游组织人次数',
          code: '34',
          data: [0]
        }, {
          title: '过夜游组织人天数',
          code: '35',
          data: [0]
        },
      ]
    }
  },
  methods: {
    ...mapActions(['setZzjdArray']),
    queryInput() {
      cleanInput(this.$el.querySelectorAll("input"));
    },
    countTourism() {
      this.loading = true;
      this.loadtext = '数据保存中，请稍后...';
      setTimeout(() => {
        this.changeStoreArray();
        sessionStorage.setItem("zzjdarr", JSON.stringify(this.zzjdarr));
        this.loading = false;
      }, 500);
    },
    changeStoreArray(){
      this.setZzjdArray(this.zzjdarr);
    },
    // submitReport() {
    //   if (!sessionStorage.getItem("name")) {
    //     this.$message({
    //       message: '提交失败，请输入填表人',
    //       type: 'warning'
    //     });
    //     return false;
    //   }
    //   if (!sessionStorage.getItem("phone")) {
    //     this.$message({
    //       message: '提交失败,请输入填表人手机号码',
    //       type: 'warning'
    //     });
    //     return false;
    //   }
    //   if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(sessionStorage.getItem("phone")))) {
    //     this.$message({
    //       message: '填表人手机号码格式错误，请重新输入',
    //       type: 'warning'
    //     });
    //     return false;
    //   }
    //   this.loading = true;
    //   this.loadtext = '提交报表中，请稍后...'
    //   this.saveReportData();
    //   let arr = [];
    //   this.zzjdarr.map((item) => {
    //     arr.push(item.data);
    //   });
    //   const inboundData = {
    //     inboundData: JSON.stringify({
    //       arr,
    //       name: sessionStorage.getItem("name"),
    //       phone: sessionStorage.getItem("phone"),
    //     }),
    //     inboundLiaisonPNum: this.zzjdarr[0].data[0],
    //     inboundReceptionPNum: this.zzjdarr[0].data[1],
    //     inboundLiaisonPDNum: this.zzjdarr[0].data[2],
    //     inboundReceptionPDNum: this.zzjdarr[0].data[3],
    //   }
    //   api.onlineReport(inboundData).then((response) => {
    //     let mesType = '';
    //     let resMessage = '';
    //     if (response.data.error_code === 0) {
    //       sessionStorage.removeItem("zzjdarr");
    //       mesType = 'success'
    //       resMessage = response.data;
    //     } else {
    //       mesType = 'error';
    //       resMessage = response.error_msg;
    //     }
    //     this.$message({
    //       message: resMessage,
    //       type: mesType
    //     });

    //   }).finally(() => {
    //     this.loading = false;
    //     this.queryInput(6);
    //   })
    // },
  }
}
</script>
